<template>
  <div>
    <van-nav-bar
      fixed placeholder title="我的" :border="false" custom-style="background: transparent"
    />
    <div class="bg"></div>
    <div class="profile">
      <div class="image">
        <image class="avatar" :src="env.FILE_BASE_URL+imgUrl" />
      </div>
      <div class="right">
        <div class="name">
          {{ nickname }}
        </div>
        <div class="phone">
          <div>{{ mobile }}</div>
          <!--          <div class="phone-my" @click="clickPerson">
            <div>个人主页</div>
            <van-icon name="arrow" />
          </div>-->
        </div>
      </div>
    </div>
    <div class="company-profile">
      <div class="company-top">
        <div class="img">
          <image src="../../../static/me/company.png" />
        </div>
        <div class="company-name">
          江苏中恩网络科技有限公司
        </div>
        <div class="company-auth">
          <div>
            <image src="../../../static/me/auth.png" />
          </div>
          <div>普通认证</div>
        </div>
      </div>
      <div class="company-line"></div>
      <div class="company-bot">
        <div class="bot-left">
          <span>{{ position }}</span>
        </div>
        <div class="bot-line"></div>
        <div class="bot-center">
          入职{{ entryTime }}年至今
        </div>
        <div v-if="email" class="bot-line"></div>
        <div class="bot-cen">
          <span>{{ email?email:'' }}</span>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="menus">
        <div v-for="menu in menus" :key="menu.name" class="menu" @click="handleClick(menu.name)">
          <div class="left">
            <image class="icon" :src="`../../../static/me/${menu.name}.png`" />
            <span>{{ menu.title }}</span>
          </div>
          <image class="right" src="../../../static/me/arrow-right.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUseInfo } from '@/utils/storage'
export default {
  data() {
    return {
      menus: [
        // { name: 'contact', title: '账号管理' },
        // { name: 'help', title: '帮助中心' },
        // { name: 'about', title: '关于我们' },
      ],
      imgUrl: '../../../static/me/avatar.png',
      nickname: '',
      mobile: '',
      position: '',
      entryTime: '',
      email: '',
      env: this.$env,
    }
  },
  onShow() {
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: 'transparent',
    })
  },
  computed: {
    // nickname() {
    //   return '张三'
    // },
    // mobile() {
    //   return '15243245368'
    // },
  },
  mounted() {
    const info = getUseInfo()
    if (info.userId) {
      this.nickname = info.name
      this.mobile = info.phone
      this.imgUrl = info.avatar
      this.email = info.email
      this.position = info.postList[0].postName
      this.computTime(info.entryDate)
    }
  },
  methods: {
    computTime(value) {
      const now = new Date()
      const year = now.getFullYear()
      const month = (now.getMonth() + 1).toString().padStart(2, '0')
      const day = now.getDate().toString().padStart(2, '0')
      const stratTime = value
      const endTime = `${year}-${month}-${day}`
      // 将毫秒转换为天数
      this.entryTime = Math.floor((new Date(endTime).getTime() - new Date(stratTime).getTime()) / (24 * 3600 * 1000 * 365))
    },
    clickPerson() {
      uni.navigateTo({
        url: '/pages/me/person/index',
      })
    },
    handleClick(name) {
      switch (name) {
        case 'contact':
          // TODO:
          break
        case 'help':
          // TODO:
          break
        case 'about':
          // TODO:
          break
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  position: relative;
}
.bg {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 244px;
  background: rgba(107,197,223,0.4);
  filter: blur(30px);
  z-index: -1;
}
.profile {
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 8px;
  display: flex;
  column-gap: 15px;
  .image{
    width: 16%;
    .avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
    }
  }
  .right {
    width: 84%;
    padding: 7px 0;
    color: #000000;
    .name {
      font-size: 16px;
      font-weight: 500;
      line-height: 16px;
    }
    .phone {
      margin-top: 8px;
      font-size: 12px;
      line-height: 12px;
      font-weight: 400;
      display: flex;
    align-items: center;
    justify-content: space-between;
      .phone-my{
        display: flex;
        align-items: center;
        div{
          padding-right:10px;
        }
      }
    }
  }
}
.company-profile{
  margin-top: 10px;
  padding: 0px 0px 0px 10px;
  width: 90%;
  margin:0 auto;
  height:91px;
  background: linear-gradient(270deg, #A0D3FF 0%, #82d0ef 100%);
  border-radius: 10px 10px 0px 0px;
  .company-top{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    image{
        width:16px;
        height:16px;
      }
    .img{
      width: 8%;
      display: flex;
      align-items: center;
    }
    .company-name{
      width: 74%;
      color:#fff;
      font-size: 14px;
    }
    .company-auth{
      width: 18%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background:#fff;
      color:#5396FF;
      padding-right: 5px;
      border-radius: 10px 0px 0px 10px;
      font-size: 10px;
      div:nth-child(1){
        display: flex;
        align-items: center;
      }
    }
  }
  .company-line{
    width: 97%;
    height:1px;
    background: linear-gradient(270deg, #c9def3 0%, #8de0f7 100%);
  }
  .company-bot{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    color:#fff;
    font-size: 12px;
    .bot-left{
		padding-right:5px;
		span:nth-child(2){
			padding:0px 5px;
		}
    }
    .bot-line{
      width:1px;
      height:12px;
      background:#fff;
      margin:0px 5px;
    }
    .bot-center{
      padding:0px 5px;
    }
    .bot-cen{
      span{
        padding:0 5px;
      }
    }
    .bot-right{
      padding:0px 5px;
    }
  }
}
.main {
  padding: 10px 15px;
  background: #fff;
  .menus {
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 2px;

    .menu {
      padding: 14px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .left {
        display: flex;
        align-items: center;
        color: #333;
        .icon {
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
      }
      .right {
        width: 16px;
        height: 16px;
      }

      &:nth-child(n+2)::after {
        content: '';
        display: block;
        background-color: #f2f2f2;
        height: 1px;
        position: absolute;
        top: 0;
        left: 10px;
        right: 10px;
      }
    }
  }
}
</style>
